// Export color constants
export const normalTextColor = 'text.primary';
export const contrastTextColor = 'common.white';
export const normalHeaderColor = 'primary.main';
export const normalIconColor = 'primary.main';

// Icon styles
export const iconSx = (darkMode, iconColor = normalIconColor) => ({
  fontSize: 60, 
  color: iconColor, 
  mb: 2
});

// Large header styles
export const largeHeaderSx = (darkMode, textColor = normalHeaderColor) => ({
  mb: 3, 
  color: textColor, 
  fontSize: 'h2.fontSize',
  letterSpacing: 'h2.letterSpacing',
  lineHeight: 'h2.lineHeight',
  fontWeight: "800"
});

// Small header styles
export const smallHeaderSx = (darkMode, textColor = normalTextColor) => ({
  fontSize: 'h5.fontSize', 
  fontWeight: "bold", 
  mb: 1, 
  color: textColor
});

// Button styles
export const buttonSx = (darkMode, textColor = normalTextColor) => ({
  fontSize: '1.25rem',
  fontWeight: 'bold',
  my: 2
});

// List item styles
export const listItemSx = (darkMode, textColor = normalTextColor) => ({
  fontSize: 'body2.fontSize', 
  color: textColor
});